<template>
  <div class="zhucedenglu">
    <div class="login_box">
      <div class="active_box">
        <img src="../../assets/logo.png" alt="">
      </div>
      <div class="input">
        账号:  <input type="text"  @input="inputValue" class="one">
        <br>
        <br>
        密码:  <input type="password" @input="inputValue01" class="two">
      </div>
      <div class="content">

        <zhuce></zhuce>
        <denglu></denglu>
      </div>
    </div>
  </div>

</template>


<script>
  import zhuce from "./childCpns/zhuce";
  import denglu from "./childCpns/denglu";
  export default {
    name: "zhucedenglu",
    components:{
      zhuce,
      denglu
    },
    data(){
      return {
        value: 0,
        passwod: 0
      }
    },
    methods:{
      inputValue(event){
        this.value = event.target.value
        // if(event.target.value.length != 11){
        //
        // }
        console.log(this.value)
      },
      inputValue01(event){
        this.passwod = event.target.value
        console.log(this.passwod)
      }
    }
  }
</script>

<style scoped>

  .zhucedenglu{
    width: 100%;
    height: 100%;

  }
  .login_box{
    width: 250px;
    height: 350px;
    background-color: #d57373;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);

  }
  .active_box{
    width: 160px;
    height: 160px;
    margin: 10px auto;
    border-radius: 50%;
    box-shadow: 0 0 10px #ddd;
  }
  img{
      width: 100px;
      height: 100px;
      margin: 30px 30px;
      border-radius: 50%;
      border: 7px solid white;
    background-color: #eee;
    }
  .input{
    margin-left: 10px;
    padding-top: 10px;
    display: block;
    color: white;
  }
  /*.container{*/
  /*  padding: 30px 20px;*/
  /*}*/
  /*.zhuce{*/
  /*  margin-left: 50px;*/
  /*}*/
  .content{
    display: inline;

  }
  .one,.two{
    width: 150px;
  }

</style>
